<template>
	<div class="wrap">
		<div class="p-2 flex flex-col h-full">
			<div class="flex-auto">
				<u-form :model="form" ref="uForm" :label-width="200" >
					<u-divider color="#2979ff" bg-color="none" fontSize="36">完善信息</u-divider>
					<u-form-item label="id" v-show="false">
						<u-input v-model="form._id" />
					</u-form-item>
					<u-form-item label="昵称" prop="nickname">
						<u-input v-model="form.nickname" />
					</u-form-item>
					<u-form-item label="姓名" prop="name">
						<u-input v-model="form.name" />
					</u-form-item>
					<u-form-item label="性别" prop="sex">
						<u-input v-model="form.sex" type="text" @click="sexShow=true" disabled />
						<u-select v-model="sexShow" :list="sexList" @confirm="sexConfirm"></u-select>
					</u-form-item>
					<u-form-item label="电话" prop="phone">
						<u-input v-model="form.phone" />
					</u-form-item>
					<u-divider color="#2979ff" bg-color="none" fontSize="36">设置登录用户名密码</u-divider>
					<u-form-item label="登录用户名" prop="username">
						<u-input v-model="form.username" />
					</u-form-item>
					<u-form-item label="旧密码" prop="oldPwd" v-show="false">
						<u-input v-model="form.oldPassword" />
					</u-form-item>
					<u-form-item label="密码" prop="newPwd">
						<u-input v-model="form.newPassword" type="password" />
					</u-form-item>
					<u-form-item label="重复密码" prop="confirmPwd">
						<u-input v-model="form.passwordConfirmation" type="password" />
					</u-form-item>
					
				</u-form>
			</div>
			
			<div>
				<u-button type="primary" @click="submit">保存</u-button>
			</div>
		</div>
		
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: mapState(['eventId']),
		data() {
			return {
				form: {
					_id: '',
					nickname: uni.getStorageSync('nickname'),
					name: '',
					username: '',
					sex: '',
					phone: '',
					oldPassword: '123456',
					newPassword: '',
					passwordConfirmation: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					phone: [{
						required: true,
						message: '请输入电话号码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}]
				},
				sexShow: false,
				sexList: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				]

			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getUser()
		},
		methods: {
			async getUser() {
				let id = uni.getStorageSync('user_id')
				const db = uniCloud.database();
				let res = await db.collection('uni-id-users').where({
					_id: id
				}).get({
					getOne: true
				})
				this.form = {
					...this.form,
					...res.result.data
				}
			},
			submit() {
				uni.showLoading({
					title: '保存中...'
				})
				const db = uniCloud.database();
				let form = {
					nickname: this.form.nickname,
					name: this.form.name,
					username: this.form.username,
					sex: this.form.sex,
					phone: this.form.phone,
				}
				let pwdForm = {
					newPassword: this.form.newPassword,
					oldPassword: this.form.oldPassword,
					passwordConfirmation: this.form.passwordConfirmation
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过', pwdForm);
						// debugger

						uni.hideLoading()
						db.collection('uni-id-users').doc(this.form._id).update(form).then(e => {
							this.savePwd(pwdForm)
						})
					} else {
						console.log('验证失败');
					}
				});

			},
			savePwd(formData) {
				let that = this
				uni.showLoading()
				uniCloud.callFunction({
					name: 'user-center',
					data: {
						action: 'updatePwd',
						params: {
							...formData
						}
					},
					success: (res) => {

						uni.hideLoading()
						if (res.result.code === 0) {
							uni.showModal({
								title: '提示',
								content: '保存成功',
								showCancel: false,
								success: (res) => {
									uni.reLaunch({
										url: '/pages/events/operation?id='+that.eventId
									})
									// uni.navigateBack({
									// 	delta: 2
									// });
									// if (res.confirm) {
									// 	that.logout();
									// 	uni.removeStorageSync('uni_id_token')
									// 	uni.removeStorageSync('username')
									// 	uni.reLaunch({
									// 		url: '/pages/login/login'
									// 	})
									// }
								}
							});
						} else {
							uni.showToast({
								title: res.result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					fail: (e) => {
						uni.hideLoading()
						uni.showModal({
							content: '修改密码失败',
							showCancel: false
						})
					}
				})
			},
			sexConfirm(e) {
				console.log(e, this.form);
				this.form.sex = e[0].label
			}
		}
	};
</script>
